<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<form id="myForm" class="form-horizontal" action="user/add" method="post">
    <div class="form-group">
        <label for="xingming" class="col-sm-2 control-label">姓名</label>
        <div class="col-sm-10">
            <input type="text" name="xingming" class="form-control" id="xingming" placeholder="请输入姓名">
        </div>
    </div>
    <div class="form-group">
        <label for="shouji" class="col-sm-2 control-label">联系方式</label>
        <div class="col-sm-10">
            <input type="text" name="shouji" class="form-control" id="shouji" placeholder="请输入联系方式">
        </div>
    </div>
    <div class="form-group">
        <label for="name" class="col-sm-2 control-label">账号</label>
        <div class="col-sm-10">
            <input type="text" name="username" class="form-control" id="name" placeholder="请输入密码">
        </div>
    </div>
    <div class="form-group">
        <label for="password" class="col-sm-2 control-label">密码</label>
        <div class="col-sm-10">
            <input type="text" name="password" class="form-control" id="password" placeholder="请输入密码">
        </div>
    </div>

    <div class="form-group">
        <label for="role" class="col-sm-2 control-label">员工职位</label>
        <div class="col-sm-10">
            <select name="role.id" id="role" class="form-control">
                <c:forEach items="${requestScope.ShenFen}" var="a">
                    <option value="${a.id}">${a.name}</option>
                </c:forEach>
            </select>
        </div>
    </div>

    <div class="form-group">
        <label for="book_img" class="col-sm-2 control-label">头像</label>
        <div class="col-sm-10">
            <input type="file" name="bookImg"  class="form-control" id="book_img">
        </div>
    </div>
    <div class="form-group has-feedback">
        <label for="img" class="col-sm-2 control-label">头像预览:</label>
        <div class="col-sm-10">
            <input type="hidden" id="img" name="tupian">
            <div id="show"></div>
        </div>
    </div>
</form>
<script>
    $("#show").append("<img height='200px' width='200px'id=\"showw\" src=\"\">");
    var book_img = document.getElementById("img").value;
    //  显示要修改的图片
    $("#showw").attr("src",book_img);
    //         单击图片按钮显示出来
    $('#book_img').on('change',function() {
        $("#show").text("");
        //加载选择图片
        var r= new FileReader();
        f=document.getElementById('book_img').files[0];
        r.readAsDataURL(f);
        r.onload=function  (e) {
            $("#show").append("<img width='200px' height='200px' id=\"showw\" src=\"\">");
            document.getElementById('showw').src=this.result;
        };
    })
</script>